﻿@{
    ViewBag.SourceFiles = "~/wwwroot/res/js/gridcard.js";
    ViewBag.Title = "GridCard/CardMultiSelectShowCheckBox";
    var F = Html.F();
}

@section head{
    <style>

        #Grid1 .f-checkbox {
            -webkit-transition: background-color .3s,border-color .3s,color .3s;
            transition: background-color .3s,border-color .3s,color .3s;
        }
        /*选择*/
        #Grid1 li .f-grid-checkselectionfield {
            top: 13px;
            right: 7px;
            left: unset;
            z-index: 99;
        }

            #Grid1 li .f-grid-checkselectionfield i {
                border-radius: 4px;
            }

        #Grid1 li {
            transition: all .3s;
        }

            #Grid1 li table {
                margin: 5px;
                position: relative;
            }

            #Grid1 li.f-grid-card-row {
                /*display:block;*/
                padding: 0px;
                border: none;
            }

                #Grid1 li.f-grid-card-row.f-state-hover {
                    box-shadow: 0px 0px 15px rgba(0, 0, 0, .3), 0 0 6px rgba(0, 0, 0, .04);
                }

        #Grid1 .card {
            transition: all .5s;
            border: 1px solid #76b4ac;
            background-size: 100% 100% !important;
            color: #fff;
            overflow: hidden;
        }

            #Grid1 .card img {
                height: 100%;
                width: 100%;
                position: absolute;
                top: 0px;
                left: 0px;
            }

        #Grid1 .f-state-hover .card {
            background-size: 110% 110% !important;
        }

            #Grid1 .f-state-hover .card:before {
                background-color: rgba(0,0,0,0.15);
            }

        #Grid1 .f-grid-row-selected .card {
            background-size: 110% 110% !important;
        }

            #Grid1 .f-grid-row-selected .card:before {
                background-color: rgba(0,0,0,0.13);
            }

        #Grid1 .card:before {
            content: "";
            transition: all .2s;
            height: 100%;
            width: 100%;
            background-color: rgba(0,0,0,.2);
            position: absolute;
            top: 0px;
        }

        #Grid1 .card .carhead {
            /*background-color:#eee;*/
            padding: 10px;
            font-weight: 600;
            border-bottom: 1px solid cornflowerblue;
            position: relative;
        }

            #Grid1 .card .carhead .name {
                display: inline-grid;
                letter-spacing: 6px;
                width: 24px;
                overflow: hidden;
                height: 25px;
                text-align: center;
                padding: 5px;
                background: cornflowerblue;
                color: aliceblue;
                margin-right: 7px;
                font-weight: 600;
                padding-top: 3px;
            }
    </style>
}
@section body {
    注意样式，本页面样式，
    <br />注意修改了 ~/res/js/gridcard.js
    <br />注意修改了DataSourceUtil.GetDataTable 增加了背景图片数据
    @(F.Grid().IsFluid(true).Title("表格").ShowHeader(true).ShowBorder(true).ID("Grid1").DataIDField("Id").DataTextField("Name")
        .Height(600).DisplayType(GridDisplayType.Card).CardRendererFunction("renderCard").EnableCheckBoxSelect(true)
        .Columns(
            F.RowNumberField(),
            F.RenderField().HeaderText("姓名").DataField("Name").Width(100),
            F.RenderField().HeaderText("Back").DataField("Back").Hidden(true),
            F.RenderField().HeaderText("性别").DataField("Gender").FieldType(FieldType.Int).RendererFunction("renderGender").Width(100),
            F.RenderField().HeaderText("入学年份").DataField("EntranceYear").FieldType(FieldType.Int).Width(100),
            F.RenderField().HeaderText("入学日期").DataField("EntranceDate")
                .FieldType(FieldType.Date).Renderer(Renderer.Date).RendererArgument("yyyy-MM-dd").Width(150),
            F.RenderCheckField().HeaderText("是否在校").DataField("AtSchool").RenderAsStaticField(true).Width(100),
            F.RenderField().HeaderText("所学专业").DataField("Major").RendererFunction("renderMajor").ExpandUnusedSpace(true).MinWidth(150),
            F.RenderField().HeaderText("分组").DataField("Group").RendererFunction("renderGroup").Width(100),
            F.RenderField().HeaderText("注册日期").DataField("LogTime").FieldType(FieldType.Date).Renderer(Renderer.Date).RendererArgument("yyyy-MM-dd").Width(100)
        )
        .DataSource(DataSourceUtil.GetDataTable())
    )
    <br>

    @(F.Button().Text("选中了哪些行（客户端）").CssClass("marginr").Listener("click", "notifySelectedRows('Grid1');"))
    @(F.Button().Listener("click", "F.ui.Grid1.selectRows([1,5,7]);").Text("选中第 2, 6, 8 行（客户端）"))
    <br>
    <br>
    @(F.Button().Text("选中了哪些行").CssClass("marginr").ID("Button1").OnClick(Url.Action("Button1_Click"), new Parameter("selected", "getGridSelectedRows()")))
    @(F.Button().OnClick(Url.Action("Button2_Click")).Text("选中第 2, 6, 8 行").ID("Button2"))
    <br>
    <br>

    @(F.Button().Text("选中了哪些行（自定义回发）").ID("Button3").Listener("click", "onButton3Click"))
    <br>
    <br>

}

@section script {

    <script src="~/res/js/grid.js"></script>
    <script src="~/res/js/gridcard.js"></script>

    <script>

        function getGridSelectedRows() {
            var result = [], grid = F.ui.Grid1;

            $.each(grid.getSelectedRows(true), function (index, item) {
                var itemArr = [];
                itemArr.push(item.id);
                itemArr.push(item.text);
                itemArr.push(item.values.Gender);
                itemArr.push(item.values.Major);

                result.push(itemArr);
            });

            return F.toJSON(result);
        }

        function onButton3Click(event) {
            var grid = F.ui.Grid1;
            if (!grid.hasSelection()) {
                F.alert('没有选中项！');
                return;
            }

            // 触发后台事件
            F.doPostBack('@Url.Action("Button1_Click")', {
                'selected': getGridSelectedRows()
            });
        }
    </script>
}
